<template>
  <div class="app-container">
    <el-form :model="article" :rules="rules" ref="ruleForm" label-width="80px">
      <el-row :gutter="12">
        <el-col :span="8">
          <el-card shadow="always" class="top-card">
            <el-form-item label="文章标题" prop="title"><el-input v-model="article.title"></el-input></el-form-item>
            <el-form-item label="文章描述" prop="description"><el-input type="textarea" rows="4" v-model="article.description"></el-input></el-form-item>
            <el-form-item label="作者"><el-input v-model="article.author"></el-input></el-form-item>
            <el-form-item label="标签">
              <el-select style="width: 100%;" v-model="article.yrTags" multiple filterable allow-create default-first-option placeholder="请选择文章标签">
                <el-option v-for="item in allTags" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="文章类型">
              <el-radio-group v-model="article.type">
                <el-radio :label="1">技术文章</el-radio>
                <el-radio :label="2">散文小说</el-radio>
                <el-radio :label="3">诗词歌赋</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="封面">
              <el-upload :action="uploadImgUrl" list-type="picture-card" :limit="1" :on-success="handleSuccess" :on-remove="handleRemove"><i class="el-icon-plus"></i></el-upload>
              <el-dialog :visible.sync="dialogVisible"><img width="100%" :src="article.cover" alt="" /></el-dialog>
            </el-form-item>
            <el-form-item label="是否推荐"><el-switch v-model="article.recommend" :active-value="1" :inactive-value="0"></el-switch></el-form-item>
            <el-form-item label="是否置顶"><el-switch v-model="article.top" :active-value="1" :inactive-value="0"></el-switch></el-form-item>
            <el-form-item label="直接发布"><el-switch v-model="article.publish" :active-value="1" :inactive-value="0"></el-switch></el-form-item>
            <el-form-item>
              <div class="btn">
                <el-button type="primary" @click="onSubmit">新增</el-button>
                <el-button>取消</el-button>
              </div>
            </el-form-item>
          </el-card>
        </el-col>

        <el-col :span="16">
          <el-card shadow="always" class="top-card">
            <div class="editor"><editor v-model="article.contentFormat"></editor></div>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { listTag } from '@/api/manager/tag';
import { addArticle, editArticle } from '@/api/manager/article';
import editor from '@/components/Editor/index.vue';
export default {
  components: {
    editor
  },
  data() {
    return {
      dialogVisible: false,
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/yr-cloud-service-file/file/upload',
      rules: {
        title: [
          {
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }
        ],
        description: [
          {
            required: true,
            message: '请输入文章描述',
            trigger: 'blur'
          }
        ]
      },
      allTags: [],
      article: {
        title: '',
        description: '',
        contentFormat: '',
        author: 'Lang',
        coverType: '',
        cover: '',
        recommend: 0,
        categoryId: '',
        top: 0,
        publish: 1,
        type: 1,
        yrTags: []
      }
    };
  },
  created() {
    this.getAllTags();
  },
  methods: {
    handleRemove(file, fileList) {
    },
    getAllTags() {
      listTag().then(res => {
        this.allTags = res.data;
      });
    },
    onSubmit() {
      let article = JSON.parse(JSON.stringify(this.article));
      article.yrTags = article.yrTags.map(e => {
        return {
          id: typeof e == 'number' ? e : '',
          name: typeof e == 'string' ? e : ''
        };
      });
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          addArticle(article).then(res => {
            this.$message.success('发布成功');
            this.article = {
              title: '',
              description: '',
              contentFormat: '',
              author: 'Lang',
              coverType: '',
              cover: '',
              recommend: 0,
              categoryId: '',
              top: 0,
              publish: 1,
              type: 1,
              yrTags: []
            };
          });
        }
      });
    },
    handleSuccess(res) {
      if (res.code == 200) {
        this.article.cover = res.data.img;
        this.$message.success('图片上传成功');
      } else {
        this.$message.error('图片上传失败');
      }
    }
  }
};
</script>

<style scoped lang="stylus">
.editor
  height 80vh
.top-card
  height 85vh
.btn
  padding-top 10px
</style>
